<%-- 
    Document   : BrowseSongByTitle
    Created on : Jun 7, 2012, 8:13:19 AM
    Author     : Student
--%>


<%@tag description="put the tag description here" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/style.css" />

<script  src="${pageContext.request.contextPath}/js/qaEffect.js"></script>
<script src="${pageContext.request.contextPath}/js/flexiblelist.js"></script>


<%-- The list of normal or fragment attributes can be specified here: --%>
<jsp:useBean id="dao" scope="page" class="connection.DaoSong"/>
<%@attribute name="message"%>
<%-- any content can be specified here e.g.: --%>

<script type="text/javascript">
    function searchit(){
        var keyword = document.getElementById('searchbar').value;
        for(var i=0;i<document.getElementById('searching').length;i++){
            if(document.getElementsByName("titleS")[i].className == 'titleS'){
                if(document.getElementsByName("titleS")[i].innerHTML.toLowerCase().indexOf(keyword.toLowerCase()) == -1){
                    document.getElementsByName("titleS")[i].style.height = '0px';
                }
                else{
                    document.getElementsByName("titleS")[i].style.height = '20px';
                }
            } 
        }
    }
</script>


<div id="itunewindow">
    ${message}<br/>
    <div id ="songlist" > 
        <br/><br/>
        <span class="sort" data-sort="question_slide" > Search Song </span>
        <input class="search" />
        <br/><br/>
        <ol class="list">

            <c:forEach items="${dao.retrieveGetSongBy()}" var="song">



                <li class ="songdetail" >      

                    <div class="question_slide" > 
                        <span class="tracktitle">
                            ${song.title}
                        </span>

                  

                            <c:url value="/BuySongController" var="urlBuy">
                                <c:param name="songId" value="${song.songId}"/>
                            </c:url>   
                            <a href="${urlBuy}"><input id="btnBuy" type="button" value="Buy" name="btnBuy" > </a> 
                         

                        <c:if test="${account.accountType eq 'ADMIN'}" >
                            <c:url value= "/EditSongController" var="urlEditSong">
                                <c:param name="songId" value="${song.songId}"/>
                            </c:url>   
                            <a href="${urlEditSong}"><input id="btnEdit" type="button" value="Edit" name="btnEdit" > </a> 

                        </c:if>
                    </div> 



                    <table style="width: 100%; ">

                        <tr>
                            <td style="width: 5%"></td>
                            <td style="width: 10%">
                            </td>
                            <td style="width: 70%">


                                </form>
                            </td>
                        </tr>
                    </table>


                    <div class="answer"> 
                        <div id="searching"> 

                            <br/>
                            <table>
                                <tr>
                                    <td style="width: 10%;" > </td>
                                    <td style="width: 30%;">
                                        <img class="songcover" src="${song.imageLocation}"  />
                                    </td>
                                    <td style="width: 10%;" > </td>
                                    <td>
                                        <table>
                                            <tr>
                                                <td>
                                                    <img src="${pageContext.request.contextPath}/images/artist.jpg" 
                                                         height="20px" width="20px" /> ${song.artist} 
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <img src="${pageContext.request.contextPath}/images/album.jpg" 
                                                         height="20px" width="20px" /> ${song.album} 
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <img src="${pageContext.request.contextPath}/images/genre.jpg" 
                                                         height="20px" width="20px" /> ${song.genre} 
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <img src="${pageContext.request.contextPath}/images/rating.jpg" 
                                                         height="20px" width="20px" /> ${song.rating} 
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <img src="${pageContext.request.contextPath}/images/dateReleased.jpg" 
                                                         height="20px" width="20px" /> ${song.dateReleased} 
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="font-size: 30px;">
                                                    <img src="${pageContext.request.contextPath}/images/price.jpg" 
                                                         height="40px" width="40px" />   ${song.price} 
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <c:url value="/ViewLyricsController" var="urlLyrics">
                                                        <c:param name="songId" value="${song.songId}"/>
                                                    </c:url>   
                                                    <a href="${urlLyrics}">View Lyrics </a> 
                                                </td>



                                            </tr>
                                            <tr>
                                                <td>
                                                    <c:url value="/ViewReviewsController" var="urlReviews">
                                                        <c:param name="songId" value="${song.songId}"/>
                                                    </c:url>   
                                                    <a href="${urlReviews}">View Reviews </a> 
                                                </td>



                                            </tr>



                                        </table>

                                    </td>

                                </tr>


                            </table>


                            <br/>


                        </div> 
                    </div> 
                </li>
            </c:forEach>
        </ol>
    </div>
</div>

<script type="text/javascript"> 
    initShowHideDivs();
    // showHideContent(true,-1);	// Automatically expand first item
   
    var slideSpeed =20;	// Higher value = faster
    var timer = 20;	// Lower value = faster
    var expandMultiple = true;
        
    var options = {
        valueNames: [ 'tracktitle' ]
    };

    var featureList = new List('songlist', options);
        
        
        
        
    window.onload = function() { 
        var s = document.getElementById("mySelect");
        s.selectedIndex = s.options.length - 1;

    };
          
        
</script>   